<template>
    <div class="add-box">
        <div>数据列表</div>
        <el-button @click="add">添加</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="编号" align="center" width="100" />
        <el-table-column prop="name" label="原因类型" align="center" width="400" />
        <el-table-column prop="sort" label="排序" align="center" width="100" />
        <el-table-column prop="status" label="是否可用" width="400" align="center">
            <template #default="scope">
                <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
                    @change="changeHandle(scope.row)" />
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="添加时间" align="center">
            <template #default="scope">
                {{ fomatDate(scope.row.createTime) }}
            </template>
        </el-table-column>
        <el-table-column prop="id" label="操作" align="center">
            <template #default="scope">
                <el-button @click="update(scope.row.id)">编辑</el-button>
                <el-button @click="delete2(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="Page">
        <div class="del">
            <el-select v-model="state.val" placeholder="批量操作">
                <el-option label="批量删除" value="0" />
            </el-select>
            <el-button type="primary" @click="delete1">确定</el-button>
        </div>
        <ElConfigProvider :locale="zhCn">
            <el-pagination background v-model:currentPage="page.pageNum" @size-change="pageSizeChagne"
                @current-change="currentChange" v-model:page-size="page.pageSize" :page-sizes="[5, 10, 15]"
                layout="total,prev,sizes,prev, pager,next,jumper" :total="total" />
        </ElConfigProvider>
    </div>
    <returnupdate :show="ReturnShow" @hide="returnshow" @reach="reachHTML" :data="statusID" />
</template>
<script setup lang='ts'>
import { user } from "@/api/index";
import { reactive, ref, toRefs } from "vue";
import { fomatDate } from "@/utils/index";
import { ElConfigProvider, ElMessage, ElMessageBox } from 'element-plus'
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import returnupdate from '@/components/czl/returnupdate.vue'
interface IState {
    tableData: returnRlist[]
    page: Parames,
    total: number
    val: number | null
}

const state = reactive<IState>({
    tableData: [],
    page: {
        pageNum: 1,
        pageSize: 5
    },
    total: 0,
    val: null
})

// 控制弹出框显示与隐藏
const ReturnShow = ref(false)

// 编辑按钮传递的id
let statusID = ref(0)

// 刷新页面
const reachHTML = () => {
    getList()
}

// 添加按钮显示弹窗
const add = () => {
    ReturnShow.value = true
}
// 父传子隐藏弹窗
const returnshow = () => {
    statusID.value = 0;
    ReturnShow.value = false
}


// 渲染页面
const getList = () => {
    user.returnReasonlist(state.page).then(res => {
        if (res.code == 200) {
            state.tableData = res.data.list
            state.total = res.data.total
        }
    })
};
getList()




// 分页
const pageSizeChagne = () => {
    getList()
}

//分页
const currentChange = () => {
    getList()
}


// 多选
// 先定义一个空数组:ids
const ids = ref<number[]>([])
const handleSelectionChange = (val: returnRlist[]) => {
    ids.value = val.map(item => item.id)
}

// 批量删除
const delete1 = () => {
    if (state.val == null) {
        ElMessage.warning("请选择要操作的申请")
        return
    }
    if (state.val == 0) {
        user.deletereturnReason(ids.value).then(res => {
            if (res.code == 200) {
                ElMessage.success("删除成功")
                getList()
            }
        })
    }
}

// 单个删除
const delete2 = (id: number) => {
    ElMessageBox.confirm('你确定要删除吗?')
        .then(() => {
            user.deletereturnReason([id]).then(res => {
                if (res.code == 200) {
                    ElMessage.success("删除成功")
                    getList()
                }
            })
        })
        .catch(() => {

        })

}

// 修改状态
const changeHandle = (row: returnReason) => {
    user.updatereturnReason({ ids: [row.id], status: row.status }).then(res => {
        if (res.code == 200) {
            ElMessage.success("修改成功")
            getList()
        }
    })
}
// 编辑
const update = (id: number) => {
    ReturnShow.value = true
    statusID.value = id
}
let { tableData, page, total } = toRefs(state)
</script>
<style lang="less" scoped>
.Page {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

    .del .el-button {
        margin-left: 20px;
    }
}

.add-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin: 20px 0;
    font-size: 20px;
    color: black;
    box-shadow: 0 0 1px 1px #ccc;
}
</style>